<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .carousel {
        position: relative;
        width: 800px;
        height: 400px;
        margin: 50px auto;
        overflow: hidden;
      }

      .carousel-track {
        display: flex;
        transition: transform 0.5s ease-in-out;
      }

      .carousel-item {
        min-width: 100%;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .carousel-item img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }

      .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 60px;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.3);
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 2;
        font-size: 20px;
        user-select: none;
        caret-color: transparent;
      }

      .left-arrow {
        left: 20px;
      }

      .right-arrow {
        right: 20px;
      }

      .dots-container {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 5px;
      }

      .dot {
        width: 10px;
        height: 10px;
        margin: 0 5px;
        background-color: #ccc;
        border-radius: 50%;
        cursor: pointer;
        user-select: none;
        caret-color: transparent;
      }

      .dot.active {
        background-color: red;
        width: 15px;
        border-radius: 10px;
        transition: 0.3s;
      }
    </style>
  </head>
  <body>
    <div class="carousel" id="carousel">
      <div class="carousel-track" id="track"></div>

      <div class="arrow left-arrow" id="prev">&lt;</div>
      <div class="arrow right-arrow" id="next">&gt;</div>

      <div class="dots-container" id="dots"></div>
    </div>

    <script>
      var carousel = document.getElementById("carousel");
      var track = document.getElementById("track");
      var dotsContainer = document.getElementById("dots");
      var prevBtn = document.getElementById("prev");
      var nextBtn = document.getElementById("next");

      var config = {
        autoplay: true,
        interval: 3000,
      };

      var currentIndex = 0;
      var items = [];
      var totalItems = 0;
      var isTransitioning = false;
      var autoPlayInterval = null;

      var imageUrls = [
        "../fa/pc1.png",
        "../fa/pc2.png",
        "../fa/pc3.png",
        "../fa/pc4.png",
      ];

      //创建轮播图
      function createItems() {
        track.innerHTML = "";
        dotsContainer.innerHTML = "";

        var newItems = imageUrls.map(function (src) {
          var item = document.createElement("div");
          item.className = "carousel-item";
          var img = document.createElement("img");
          img.src = src;
          item.appendChild(img);
          return item;
        });

        var clonedFirst = newItems[0].cloneNode(true);
        var clonedLast = newItems[newItems.length - 1].cloneNode(true);

        track.appendChild(clonedLast);
        newItems.forEach(function (item) {
          track.appendChild(item);
        });
        track.appendChild(clonedFirst);

        items = [clonedLast].concat(newItems, clonedFirst);
        totalItems = newItems.length;

        currentIndex = 1;
        updateCarousel();

        for (var i = 0; i < totalItems; i++) {
          var dot = document.createElement("div");
          dot.className = "dot";
          dot.dataset.index = i;
          dotsContainer.appendChild(dot);
        }

        updateDots();
      }

      // 更新轮播图显示
      function updateCarousel() {
        var itemWidth = carousel.offsetWidth;
        track.style.transform =
          "translateX(-" + currentIndex * itemWidth + "px)";

        updateDots();
      }

      // 更新小圆点状态
      function updateDots() {
        var realIndex = getRealIndex();

        var dots = dotsContainer.querySelectorAll(".dot");
        for (var i = 0; i < dots.length; i++) {
          dots[i].classList.toggle("active", i === realIndex);
        }
      }

      // 获取真实索引
      function getRealIndex() {
        if (currentIndex === 0) {
          return totalItems - 1;
        } else if (currentIndex === items.length - 1) {
          return 0;
        }
        return currentIndex - 1;
      }

      // 上一张
      function prev() {
        if (isTransitioning) return;
        isTransitioning = true;
        currentIndex--;
        track.style.transition = "transform 0.5s ease-in-out";
        updateCarousel();
      }

      // 下一张
      function next() {
        if (isTransitioning) return;
        isTransitioning = true;
        currentIndex++;
        track.style.transition = "transform 0.5s ease-in-out";
        updateCarousel();
      }

      // 切换到指定幻灯片
      function goTo(index) {
        if (isTransitioning || index < 0 || index >= totalItems) return;

        isTransitioning = true;
        currentIndex = index + 1;
        track.style.transition = "transform 0.5s ease-in-out";
        updateCarousel();
      }

      // 开始自动播放
      function startAutoPlay() {
        if (config.autoplay) {
          clearInterval(autoPlayInterval);
          autoPlayInterval = setInterval(function () {
            next();
          }, config.interval);
        }
      }

      // 监听过渡结束事件
      function initTransitionEndHandler() {
        track.addEventListener("transitionend", function () {
          isTransitioning = false;

          if (currentIndex === items.length - 1) {
            currentIndex = 1;
            track.style.transition = "none";
            updateCarousel();
          } else if (currentIndex === 0) {
            currentIndex = totalItems;
            track.style.transition = "none";
            updateCarousel();
          }
        });
      }

      // 初始化事件监听器
      function initEventListeners() {
        prevBtn.addEventListener("click", prev);
        nextBtn.addEventListener("click", next);

        dotsContainer.addEventListener("click", function (e) {
          if (e.target.classList.contains("dot")) {
            var index = parseInt(e.target.dataset.index);
            goTo(index);
          }
        });

        carousel.addEventListener("mouseenter", function () {
          if (config.autoplay) {
            clearInterval(autoPlayInterval);
          }
        });

        carousel.addEventListener("mouseleave", function () {
          if (config.autoplay) {
            startAutoPlay();
          }
        });
      }

      // 初始化轮播图
      function init() {
        createItems();
        initTransitionEndHandler();
        initEventListeners();
        startAutoPlay();
      }

      // 启动
      init();
    </script>
  </body>
</html>
